
import 'package:flutter/material.dart';
import 'package:syria_sports/core/app_export.dart';

import '../../../../widgets/custom_elevated_button.dart';
import '../../../../widgets/screen_state_widget.dart';
import '../../sports_page/bloc/sports_cubit.dart';
import '../../sports_page/models/sport.dart';
import '../../sports_page/widgets/sport_item_view.dart';


class SelectSportsSheetBody extends StatelessWidget {
  final Function(Sport) onSelectSport;
  const SelectSportsSheetBody({super.key, required this.onSelectSport});

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return BlocProvider(
        create:(context)=>SportsCubit(SportsInitial())..add(SportsInitialEvent()),
      child: BlocConsumer<SportsCubit, SportsState>(
        listener: (context, state) {
          // TODO: implement listener
        },
        buildWhen: (previous, state) {
          return state is SportsDone ||
              state is SportsDone ||
              state is SportsLoading;
        },
        builder: (context, state) {
          var cubit = SportsCubit.get(context);

          return Container(
            height: height*.6,
            width: double.infinity,
            padding:const EdgeInsets.all(8),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(ImageConstant.imgBackground),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              children: [
                Center(
                  child: Container(
                    margin:const EdgeInsets.only(bottom: 8),
                    decoration: BoxDecoration(
                      color: Colors.grey,
                      borderRadius: BorderRadius.circular(99),
                    ),
                  height: 4,
                  width: 32,
                ),
                ),
                Row(
                  children: [
                    Text('الرجاء اختيار الرياضة المطلوبة'),
                  ],
                ),
                Expanded(
                  child: ScreenStateWidget(
                    isDone: state is SportsDone,
                    isError: state is SportsError,
                    isLoading: state is SportsLoading,
                    onRefresh: cubit.onRefresh,
                    onDone: BlocBuilder<SportsCubit, SportsState>(
                      buildWhen: (p, c) {
                        return c is SelectModeUpdate || c is SelectSport;
                      },
                      builder: (context, gridState) {
                        return Column(
                          children: [
                            /*if(cubit.selectedSports.isNotEmpty)
                            Row(
                              children: [
                                Text('العناصر المختارة:'),
                              ],
                            ),
                            if(cubit.selectedSports.isNotEmpty)
                            SizedBox(
                              height: 75,
                              child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: cubit.selectedSports.length,
                                itemBuilder: (BuildContext ctx, index) {
                                  return SizedBox(
                                    width: 75,
                                    child: SportItemView(
                                      sport: cubit.selectedSports[index],
                                      selectOnTap: true,
                                      isSelected:true,
                                    ),
                                  );
                                },
                              ),
                            ),
                            Row(
                              children: [
                                Text('الكل:'),
                              ],
                            ),*/
                            Expanded(
                              flex:4,
                              child: GridView.builder(
                                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                                  maxCrossAxisExtent: 100,
                                  childAspectRatio: 1
                                ),
                                itemCount: cubit.sports.length,
                                itemBuilder: (BuildContext ctx, index) {
                                  return BlocBuilder<SportsCubit, SportsState>(
                                      buildWhen: (pState,cState){
                                        return cState is SelectSport &&
                                            cState.sport.sportId ==
                                                cubit.sports[index].sportId;
                                      },
                                      builder: (context, stateItem) {
                                        return SportItemView(
                                          sport: cubit.sports[index],
                                          onTapped: (){
                                            onSelectSport(cubit.sports[index]);
                                          },
                                          isSelected:cubit.selectedSports.contains(cubit.sports[index]),
                                        );
                                      });
                                },
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ),
                /*Row(
                  children: [
                    Expanded(
                      flex: 2,
                      child: CustomElevatedButton(
                          height: 45,
                          text:"حفظ",
                          buttonTextStyle: CustomTextStyles.titleSmallOnPrimaryContainer,
                          margin:const EdgeInsets.all(16),
                          onPressed: () {
                            FocusScope.of(context).unfocus();
                          }),
                    ),
                    Expanded(
                      flex: 2,
                      child: CustomElevatedButton(
                          height: 45,
                          text:"رجوع",
                          buttonStyle: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all<Color>(Colors.redAccent), // Set the desired background color here
                          ),
                          margin:const EdgeInsets.all(16),
                          buttonTextStyle: CustomTextStyles.titleSmallOnPrimaryContainer,
                          onPressed: () {
                            Navigator.pop(context);
                          }),
                    ),
                  ],
                ),*/
              ],
            ),
          );
        },
      ),
    );
  }
}
